<template>
	<view class="comp_card_list">
		<block v-for="item,index in compcard" :key="index">
			<view class="comp_card_item" >
				<view class="cc_item_top">
					<!-- 头像 -->
					<image class="top_img" :src="`${item.u.p}`" mode=""></image>
					<!-- 中间title 信息  -->
					<view class="center_container">
						<!-- 上 username -->
						<view class="container_1">
							<view class="username">
								{{item.u.n}}
							</view>
							<view class="lv">
								LV.{{item.u.lv}}
							</view>
						</view>
						<!-- 下 粉丝 -->
						<view class="container_2">
							<view class="fans">
								{{item.u.followers_count_text}}
							</view>
							<text class="dots_blold">•</text>
							<view class="recipe">
								{{item.u.recipes_count_text}}
							</view>
						</view>
					</view>
					<!-- 关注 -->
					<view class="btn">
						关注
					</view>
				</view>
				<!-- 图片 -->
				<image class="cc_item_img " @tap = "menuClick(item.id)" :src="`${item.img}`" lazy-load="true" mode="aspectFill">
				</image>
				<!-- 收藏  分享  评论 -->
				<view class="cc_item_share">
					<view class="share_img">
						<block v-for="e,i in item.collect_users" :key="i">
							<image class="share_img_item" lazy-load="true" :src="`${e.p}`"></image>
						</block>
					</view>

					<view class="share_num">{{item.collect_count_text}}</view>
					<view class="iconfont_three">
						<!--  star-filled-->
						<uni-icons type="star" size="30"></uni-icons>
						<uni-icons type="chat" size="30"></uni-icons>
						<uni-icons type="redo" size="30"></uni-icons>
					</view>
				</view>
				<!-- 详情介绍 -->
				<view class="cc_item_content">
					<view class="content_1">
						{{item.n}}
					</view>
					<!-- <view class="content_2">
						{{item.n}}
					</view> -->
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "compCard",
		props: ["compcard"],
		data() {
			return {

			};
		},
		methods:{
			menuClick(k){
				// console.log(k,this.compcard)
				// uni.navigateTo({
				// 	url:`/pages/childPage/noteDetail/noteDetail?id=${k}`
				// })
			}
		}
	}
</script>

<style lang="scss">
	.comp_card_list {
		// margin-top: 40rpx 0;
		.comp_card_item {

			//top
			.cc_item_top {
				width: 92%;
				margin: 0 auto;
				padding: 16rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 头像
				.top_img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				// 中间 username
				.center_container {
					width: 68%;

					// 上 username
					.container_1 {
						display: flex;
						align-items: flex-end;

						.username {
							font-size: 28rpx;
							font-weight: 600;
						}

						.lv {
							// font-family: ;
							text-indent: 20rpx;
							color: #ffc533;
							font-size: 20rpx;
							font-weight: 600;
						}
					}

					// 下 粉丝
					.container_2 {
						display: flex;
						color: #C0C0C0;
						font-size: 22rpx;

						.fans {}

						.dots_blold {
							padding: 0 20rpx;
							color: #F1F1F1;
						}

						.recipe {}
					}
				}

				// 关注
				.btn {
					width: 130rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 30rpx;
					background-color: #FFC533;
					font-size: 26rpx;
				}
			}

			// img
			.cc_item_img {
				width: 100%;
				// &::before {
				// 	content: '';
				// 	display: block;
				// 	// width: 70rpx;
				// 	// height: 70rpx;
				// 	// border-radius: 50%;
				// 	// background-color: rgba(0,0,0,.4);
				// 	width: 0;
				// 	height: 0;
				// 	// border-radius: ;
				// 	border: 12px solid transparent;
				// 	border-left-color: #fff;
				// 	position: absolute;
				// 	right: 20rpx;
				// 	bottom: 20rpx;
				// }
			}

			.mask_arrow {
				position: absolute;
				bottom: 0;
				right: 0;
				display: block;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 1);
			}

			// 收藏 分享
			.cc_item_share {
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				
				.share_num {
					width: 60%;
					font-size: 20rpx;
				}

				.share_img {
					display: flex;
					// justify-content: space-between;
					align-items: center;
					.share_img_item {
						width: 38rpx;
						height: 38rpx;
						border-radius: 50%;
					}
				}
			}
			// 详情介绍
			.cc_item_content{
				width: 100%;
				.content_1{
					width: 92%;
					margin: 0 auto;
				}
			}
		}
	}
</style>
